<template>
  <div class="orders">
    <!-- <van-nav-bar title="我的"></van-nav-bar> -->
    <!-- 背景卡片 -->
    <div class="bg"> 
      <div class="up">
      <div class="photo left">
        <img :src="user.userFace" class="headimg">
      </div>
      <div class="left">
        <!-- {{user}} -->
        <div class="name" >{{user.realname}}</div>
      </div>
<van-button type="danger" size="small" class="bg-btn"   @click="logoutHandler">退出</van-button>
</div>
    </div>
    <!-- 积分卡 -->
    <div class="card">
    <div class="time">
      <div  class="h1">行走的花草（灵俞花店）</div>
      <div>有效期 2019-6-7-2050-12-31</div>
    </div>
    <div class="number">
      <div class="jpg left">
        <img src="../.././assets/88.jpg" alt="">
      </div>
      <div class="new">
        <div class="right1">1040 1440</div>
        <div class="right2">灵俞积分卡（新）</div>
        <div class="right3">18896927921</div>
      </div>
    </div>
    <div class="bottom">
      <div class="box">  <div class="num">6.00</div><div>积分</div>      </div>
      <div class="box">  <div class="num">2</div>    <div>优惠券</div>      </div>
      <div class="box">   <div class="num">953.10</div>   <div>余额</div>      </div>
    </div>
    </div>
    <!-- 黑点 -->
    <div class="black">
      <div></div>
    </div>
    <div class="adress">

      
       <van-icon class="icon-ad" size="1.5em" name="location-o" />
      <van-cell class="radius-t" title="地址管理" is-link @click="toAddress(user)"  /> 
      <!-- 跳转不到地址页面 -->
      <div class="line" ></div>
<div>
  <van-icon name="shopping-cart-o" class="icon-or" size="1.5em" />
        <van-cell title="订单" is-link to="/home/orders" />
</div>
      <div class="line" ></div>
<div>
  <van-icon name="point-gift-o" class="icon-vip" size="1.5em" />
      <van-cell  class="  radius-b" title="会员充值" is-link />
  
  </div>
    </div>
  </div>
</template>
<script>
import {useRouter} from 'vue-router'
import { get } from '../../utils/request'
import { ref } from "vue"
export default {
  setup() {
    let user = ref({})
    let router = useRouter();
    //跳转函数
    let toAddress=function (item){
      let id = item.id
      console.log(id);
      router.push({
        // path:"home/address",
        name:"address",
        params:{
          id
        }
      })
    };
    let logoutHandler = ()=>{
      localStorage.removeItem('token');
      router.push('/login');  
    }
    let loadUserInfo=function(){
      let url = "/user/info";
        let token = localStorage.getItem("token")
      get(url,{token}).then((resp)=>{
        user.value = resp.data;
        // console.log(user)
      })
    }
    return {
      logoutHandler,loadUserInfo,user,toAddress
    }
  },
  data(){
    return {

    }
  },
  mounted(){
    this.loadUserInfo();
    
  }
}
</script>
<style lang="scss" scoped>

.bg{
  // background: rgba(22, 78, 10, 0.315);
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.nosdn.127.net%2FP%3DKR8CO6fBXWRUiVbFLueWPfF2pW42PDFWW9flqF76Syu1530631924931transferflag.png&refer=http%3A%2F%2Fdingyue.nosdn.127.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637815759&t=82cc15898dac5bca91f5d9367a8524dc");
  background-size: 100%;
  height: 200px;
  width: 100%;
  .bg-btn{
    float: right;
    margin-right: 1em;
  }
 .up{
   padding-top: 1em;
   padding-left:1em;
    .photo{
    width: 40px;
    height: 40px;
    img{
      width: 100%;
      height: 100%;
    float: left;
    border-radius: 50%;}
  }
  .left{
     float: left;
     .name{
        text-shadow: 1px 1px 1px  rgb(255, 255, 255);
        }
      div{
      padding-left: 1em;
      line-height: 40px;
      font-weight: 600;
      font-size: 16px;
    }
  }
 }
}
.card{
  background-color: rgb(255, 255, 255);
  border: 1px #ddd solid;
  border-radius: 5px;
  margin: 1em;
  padding: 1em;
  position: absolute;
  top: 130px;
  z-index: 10;
  width: 85%;
  .time{
    .h1{
      font-size: 16px;
      color: #333;
    }
    .h1+div{
      color: #999;
      font-size: 12px;
    }
  }
  .number{
    overflow: hidden;
    margin-top: 1em;
    padding-left: .5em;
    .jpg{
    float: left;
      img{
        width: 130px;
      height: 80px;
      }
    }
  .new{
    padding-top: .5em;
    float: left;
    padding-left: .5em;
    color: #333;
    .right1{
      font-weight: 600;
      font-size: 16px;
    }
    .right3{
      padding-top: .5em;
      
    }
  }
  }
  .bottom{
    padding-top: .5em;
    padding-bottom: .5em;
    overflow: hidden;
      // border: hotpink 1px solid;
      text-align: center;
      .box:first-of-type{
        border-right: #ddd solid 1px;
      }
      .box:last-of-type{
        border-left: #ddd solid 1px;
      }
    .box{
      width: 33%;
      float: left;
      .num{
        font-weight: 600;
        font-size: 16px;
      }
      .num+div{
        color: #333;
      }
    }
  }
}
.black{
  margin-top: 130px;
  position: relative;
  div{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #222;
margin:0 auto
  }
}
.adress{
  position: relative;
  // padding: .5em;
  // border: hotpink 1px solid; 
  background-color: #fff;
margin: 1em;
padding: 1em  1em 1em 2em;
    .radius-t{
  // border: #db5e5e solid 1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.radius-b{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.line{
background-color: #ddd;
  height: 1px;
  padding: 0 2em;
  
}
.icon-ad{
  position:absolute;
  // margin-left: .5em;
  z-index: 10;
  top: 1em;
  left: 1em;
}
.icon-or{
  position:absolute;
  // margin-left: .5em;
  z-index: 10;
  top: 3.2em;
  left: 1em;
}
.icon-vip{
  position:absolute;
  // margin-left: .5em;
  z-index: 10;
  top: 5.4em;
  left: 1em;
}
}

</style>